<template>
  <div class="main">
    <div class="main_head">订单详情</div>
    <div class="liucheng" v-if="detailObj.orderSource == 5">
      <div class="main_head">订单流程-吧台直售</div>
      <div class="main_steps">
        <el-steps :active="statusFn" style="width: 50%;">
          <el-step title="用户提交订单">
            <template v-slot:description>
              <div>{{detailObj.createTime}}</div>
            </template>
          </el-step>
          <el-step title="待支付">
            <template v-slot:description>
              <div>{{detailObj.createTime}}</div>
            </template>
          </el-step>
          <el-step :title="detailObj.status == 6 ? '已取消' : '待取货'">
            <template v-slot:description>
              <div v-if="detailObj.status == 6">{{detailObj.cancelTime}}</div>
              <div v-else>{{detailObj.finallyTime}}</div>
            </template>
          </el-step>
          <el-step title="已完成" v-if="detailObj.status != 6">
            <template v-slot:description>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <div class="liucheng" v-if="detailObj.orderSource == 1 || detailObj.orderSource == 3">
      <div class="main_head">订单流程-APP-小程序-酒速达</div>
      <div class="main_steps">
        <el-steps :active="step" style="width: 50%;">
          <el-step title="用户提交订单">
            <template v-slot:description>
              <div>{{detailObj.createTime}}</div>
            </template>
          </el-step>
          <el-step title="待支付">
            <template v-slot:description>
              <div>{{detailObj.createTime}}</div>
            </template>
          </el-step>
          <el-step :title="detailObj.status == 6 ? '已取消' : '待取货'">
            <template v-slot:description>
              <div v-if="detailObj.status == 6">{{detailObj.cancelTime}}</div>
              <div v-else>{{detailObj.finallyTime}}</div>
              <div v-if="detailObj.status != 6">取货码:{{detailObj.spuTotalAmount}}</div>
            </template>
          </el-step>
          <el-step title="待收货" v-if="detailObj.status != 6">
            <template v-slot:description>
              <!-- <div>2020.01.10</div> -->
            </template>
          </el-step>
          <el-step title="已完成" v-if="detailObj.status != 6">
            <template v-slot:description>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <div class="liucheng" v-if="detailObj.orderSource == 2 || detailObj.orderSource == 4">
      <div class="main_head">订单流程-APP-小程序-自取</div>
      <div class="main_steps">
        <el-steps :active="step" style="width: 50%;">
          <el-step title="用户提交订单">
            <template v-slot:description>
              <div>{{detailObj.createTime}}</div>
            </template>
          </el-step>
          <el-step title="待支付">
            <template v-slot:description>
              <div>{{detailObj.createTime}}</div>
            </template>
          </el-step>
          <el-step :title="detailObj.status == 6 ? '已取消' : '待取货'">
            <template v-slot:description>
              <div v-if="detailObj.status == 6">{{detailObj.cancelTime}}</div>
              <div v-else>{{detailObj.finallyTime}}</div>
              <div v-if="detailObj.status != 6">取货码:{{detailObj.spuTotalAmount}}</div>
            </template>
          </el-step>
          <el-step title="已完成" v-if="detailObj.status != 6">
            <template v-slot:description>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <div class="main_detail">
      <div class="list">
        <div class="listleft">订单编号：<span>{{detailObj.orderId}}</span></div>
        <div class="listright">吧台编号：<span>{{detailObj.number}}</span></div>
      </div>
      <div class="list">
        <div class="listleft">订单商品：<span :style="detailObj.spuName && detailObj.spuName.length > 25 ? 'display: block; margin: 10px 0px' : ''">{{detailObj.spuName}}</span></div>
        <div class="listright">商品数量：<span>X{{detailObj.count}}</span></div>
      </div>
      <div class="list">
        <div class="listleft" v-if="detailObj.orderSource == 1">订单来源：<span>APP -酒速达</span></div>
        <div class="listleft" v-if="detailObj.orderSource == 2">订单来源：<span>APP-自取</span></div>
        <div class="listleft" v-if="detailObj.orderSource == 3">订单来源：<span>小程序-酒速达</span></div>
        <div class="listleft" v-if="detailObj.orderSource == 4">订单来源：<span>小程序-自取</span></div>
        <div class="listleft" v-if="detailObj.orderSource == 5">订单来源：<span>吧台直售</span></div>
        <div class="listright">实 付 款：<span>¥{{detailObj.spuTotalAmount}}</span></div>
      </div>
      <div class="list">
        <div class="listleft" v-if="detailObj.orderSource == 1 || detailObj.orderSource == 3">骑手信息：<span>{{detailObj.riderInfo}}</span></div>
        <div class="listright">下单时间：<span>{{detailObj.createTime}}</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      step: 3,
      detailObj: {}
    };
  },
  computed: {
    statusFn() {
      if(this.detailObj.status == 1) {
        return 2
      }
      if(this.detailObj.status == 3) {
        return 3
      }
      if(this.detailObj.status == 5) {
        return 4
      }
      if(this.detailObj.status == 6) {
        return 3
      }
    }
  },
  mounted() {
    let obj = this.$route.query.detail || { }
    this.detailObj = JSON.parse(obj)
  },
};
</script>

<style lang="scss" scoped>
.main {
  margin: 50px;
  .main_head {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 30px;
  }
  .main_steps {
  }
  .main_detail {
    margin: 50px 0;
    span {
      font-weight: 600;
    }
    .list {
      display: flex;
      margin-bottom: 40px;
      .listleft {
        width: 500px;
      }
      .listright {
        width: 500px;
      }
    }
  }
  .liucheng { 
    margin-bottom: 40px;
  }
}
</style>